<template>
  <fieldset>
    <legend>常用的api</legend>
    <button @click="handleClick">点击</button>
    <input type="text" ref="ipt">
    <h1>{{$parent.msg}}</h1>
    <Child ref="child"/>
    <h2>{{c}}</h2>
  </fieldset>
</template>

<script>
import Child from "./child.vue"
//$root是获取根实例/组件
//$parent是获取父组件实例(instance),支持链式调用

//ref
    //1.放在dom元素上，可以获取真实dom
    //2.放在子组件上，可以获得子组件的实例

//传参方式：父传子
    //1.props
    //2.$parent  $root

//子传父：
    //1.$emit 
    //2.ref

//兄弟
    //eventBus

//跨组件传参 (provider injet)和 eventBus
    //provide` 和 `inject` 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。
    //传递下去的数据是不会被响应的，如果要响应，就把main.js里的data写成一个对象
    export default {
        data(){
            return {
                c:""
            }
        },
        mounted(){
            console.log(this.$root);
            console.log(this.$parent);
        },
        methods:{
            handleClick(){
                //获取ref的内容
                console.log(this.$refs);
                this.$refs.ipt.focus()
                this.c = this.$refs.child.msg
            }
        },
        components:{
            Child
        }
    }
</script>

<style>

</style>